<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>有凹凸感的小按钮</title>

<link rel="stylesheet" href="../css/general.css" type="text/css" />
<link rel="stylesheet" href="../css/layout.css" type="text/css" />

<script type="text/javascript" src="../js/jquery_1.7.1.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $("#abc ul li").mouseover(function(){
        $(this).removeClass("unhover");
		$(this).addClass("hover");
	}).mouseout(function(){
	    $(this).removeClass("hover");
		$(this).addClass("unhover");
	
	});


});

</script>

<style type="text/css">

#abc{
margin-left:20px;
margin-top:20px;
}

li{
width:19px;
height:22px;
background:pink;
margin-right:5px;
line-height:22px;

}

li.unhover{
background-color: #F2F2F2;
border: 1px solid #999;
border-top: 1px solid #DDD;
border-left: 1px solid #DDD;
}

li.hover{
background-color: #F2F2F2;
border: 1px solid #999;
border-bottom: 1px solid #DDD;
border-right: 1px solid #DDD;
}

li.selected{
border:1px solid;
color: white;
font-weight: bold;
background: #58595B;
}

</style>

</head>

<body>
参考这个网址的页码小按钮 http://www.oschina.net/project/lang/22/php
<div id="abc">
<ul>
  <a href=""><li class="unhover" style="background-color: #CCC;"><</li></a>
  <a href=""><li class="hover" style="background-color: #CCC;"><</li></a>
  <a href=""><li class="unhover">1</li></a>
  <a href=""><li class="hover">2</li></a>
  <a href=""><li class="selected">3</li></a>
</ul>
</div>

</body>
</html>
